<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>自定义导航页</title>
    <!-- 骨架屏内联样式 -->
    <style>
        #skeleton-screen {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: #f9fafb;
            z-index: 9999;
            display: flex;
            flex-direction: column;
        }
        .skeleton-pulse {
            position: relative;
            background-color: #e5e7eb;
            overflow: hidden;
        }
        .skeleton-pulse::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            transform: translateX(-100%);
            background: linear-gradient(90deg, 
                rgba(255, 255, 255, 0) 0%, 
                rgba(255, 255, 255, 0.2) 50%, 
                rgba(255, 255, 255, 0) 100%);
            animation: shimmer 1.5s infinite;
        }
        @keyframes shimmer {
            100% {
                transform: translateX(100%);
            }
        }
        .skeleton-card {
            text-align: center;
            padding: 16px;
            background-color: #f9fafb;
            border-radius: 8px;
            height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    </style>
    <script src="https://cdn.tailwindcss.com" defer></script>
    <!-- 添加Cropper.js库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
</head>
<body class="bg-gray-100 min-h-screen font-sans">
    <!-- 骨架屏 -->
    <div id="skeleton-screen">
        <!-- 骨架屏顶部控制栏 -->
        <div style="padding: 8px; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; background-color: white;">
            <div style="display: flex; gap: 8px; flex: 1;">
                <div class="skeleton-pulse" style="width: 64px; height: 32px; border-radius: 9999px;"></div>
                <div class="skeleton-pulse" style="width: 64px; height: 32px; border-radius: 9999px;"></div>
                <div class="skeleton-pulse" style="width: 64px; height: 32px; border-radius: 9999px;"></div>
            </div>
            <div style="display: flex; gap: 8px;">
                <div class="skeleton-pulse" style="width: 96px; height: 32px; border-radius: 4px;"></div>
                <div class="skeleton-pulse" style="width: 64px; height: 32px; border-radius: 4px;"></div>
                <div class="skeleton-pulse" style="width: 64px; height: 32px; border-radius: 4px;"></div>
            </div>
        </div>
        
        <!-- 骨架屏内容区域 -->
        <div style="flex: 1; padding: 16px; padding-top: 80px;">
            <div style="max-width: 72rem; margin-left: auto; margin-right: auto;">
                <!-- 根据屏幕大小确定布局 -->
                <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 20px; padding: 15px 5px;">
                    <!-- 骨架图标项 -->
                    <div class="skeleton-card">
                        <div class="skeleton-pulse" style="width: 56px; height: 56px; border-radius: 18px; margin-bottom: 8px;"></div>
                        <div class="skeleton-pulse" style="width: 80px; height: 16px; border-radius: 4px;"></div>
                    </div>
                    <div class="skeleton-card">
                        <div class="skeleton-pulse" style="width: 56px; height: 56px; border-radius: 18px; margin-bottom: 8px;"></div>
                        <div class="skeleton-pulse" style="width: 64px; height: 16px; border-radius: 4px;"></div>
                    </div>
                    <div class="skeleton-card">
                        <div class="skeleton-pulse" style="width: 56px; height: 56px; border-radius: 18px; margin-bottom: 8px;"></div>
                        <div class="skeleton-pulse" style="width: 72px; height: 16px; border-radius: 4px;"></div>
                    </div>
                    <div class="skeleton-card">
                        <div class="skeleton-pulse" style="width: 56px; height: 56px; border-radius: 18px; margin-bottom: 8px;"></div>
                        <div class="skeleton-pulse" style="width: 80px; height: 16px; border-radius: 4px;"></div>
                    </div>
                    <div class="skeleton-card">
                        <div class="skeleton-pulse" style="width: 56px; height: 56px; border-radius: 18px; margin-bottom: 8px;"></div>
                        <div class="skeleton-pulse" style="width: 64px; height: 16px; border-radius: 4px;"></div>
                    </div>
                    <div class="skeleton-card">
                        <div class="skeleton-pulse" style="width: 56px; height: 56px; border-radius: 18px; margin-bottom: 8px;"></div>
                        <div class="skeleton-pulse" style="width: 72px; height: 16px; border-radius: 4px;"></div>
                    </div>
                </div>
                
                <!-- 骨架屏指示器 -->
                <div style="display: flex; justify-content: center; margin-top: 24px; gap: 8px;">
                    <div class="skeleton-pulse" style="width: 8px; height: 8px; border-radius: 50%;"></div>
                    <div class="skeleton-pulse" style="width: 8px; height: 8px; border-radius: 50%;"></div>
                    <div class="skeleton-pulse" style="width: 8px; height: 8px; border-radius: 50%;"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 内联脚本控制骨架屏 -->
    <script>
        // 页面加载完成后隐藏骨架屏
        window.addEventListener('load', function() {
            setTimeout(function() {
                var skeleton = document.getElementById('skeleton-screen');
                if (skeleton) {
                    skeleton.style.opacity = '0';
                    skeleton.style.transition = 'opacity 0.2s ease';
                    setTimeout(function() {
                        skeleton.style.display = 'none';
                    }, 10);    // 延迟500ms后隐藏骨架屏
                }
            }, 10); // 给一个小延迟确保渲染完成
        });
    </script>

    <!-- 顶部控制栏 -->
    <div class="fixed top-0 left-0 right-0 bg-white shadow-md z-50 p-2 flex justify-between items-center">
        <div class="flex space-x-2 overflow-x-auto tab-scroll flex-1 pr-2">
            <template id="tab-template">
                <div class="tab-btn bg-gray-200 px-4 py-2 rounded-full cursor-pointer hover:bg-gray-300 flex items-center whitespace-nowrap">
                    <span class="tab-name"></span>
                    <button class="ml-1 text-red-500 hidden tab-close focus:outline-none" aria-label="关闭标签页">
                        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" clip-rule="evenodd"/>
                        </svg>
                    </button>
                </div>
            </template>
        </div>
    </div>

    <!-- 标签页放置区已移除，直接使用顶部标签栏 -->

    <!-- 主内容区域 -->
    <div class="pt-20 p-4">

    <!-- 系统设置模态框 -->
    <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-bold">系统设置</h2>
                <button id="close-settings" class="text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
            </div>
            <div class="space-y-4">
                <button id="modal-add-tab" class="w-full bg-blue-500 text-white px-4 py-3 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-colors">
                    新增标签页
                </button>
                <button id="modal-export-data" class="w-full bg-green-500 text-white px-4 py-3 rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300 transition-colors">
                    导出数据
                </button>
                <input type="file" id="modal-import-file" class="hidden" accept=".json">
                <button id="modal-import-data" class="w-full bg-yellow-500 text-white px-4 py-3 rounded hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-300 transition-colors">
                    导入数据
                </button>
            </div>
        </div>
    </div>
        <div class="max-w-6xl mx-auto content-container" id="content-container">
            <div class="icon-grid grid" id="icon-container">
                <!-- 这里会动态添加导航图标 -->
            </div>
        </div>
        
        <!-- 标签页指示器 - 移到content-container外部 -->
        <div class="tab-indicator mt-6" id="tab-indicator">
            <!-- 这里会动态添加标签页指示器 -->
        </div>
    </div>

    <!-- 提示信息 -->
    <div id="toast" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg opacity-0 transition-opacity duration-300 z-50">
        操作成功
    </div>

    <!-- 右键菜单 -->
    <div id="icon-context-menu" class="context-menu">
        <div class="context-menu-item" id="edit-icon">编辑</div>
        <div class="context-menu-item delete" id="delete-icon">删除</div>
    </div>

    <!-- 确认删除浮层 -->
    <div class="confirm-overlay" id="confirm-overlay">
        <div class="confirm-dialog">
            <h3>确定要删除这个导航图标吗？</h3>
            <div class="confirm-buttons">
                <button class="bg-gray-300 hover:bg-gray-400 rounded px-4 py-2" id="cancel-delete">取消</button>
                <button class="bg-red-500 text-white hover:bg-red-600 rounded px-4 py-2" id="confirm-delete">删除</button>
            </div>
        </div>
    </div>

    <!-- 弹窗模板 -->
    <div id="modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-md w-full shadow-xl modal-content" onclick="event.stopPropagation();">
            <div class="p-6">
                <h3 class="text-lg font-bold mb-4" id="modal-title">新增导航</h3>
                <form id="icon-form" class="space-y-4">
                    <div>
                        <label class="block text-gray-700 mb-2">名称 <span class="text-red-500">*</span></label>
                        <input type="text" name="name" required class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-blue-300 transition-colors" maxlength="20" style="pointer-events: auto; position: relative; z-index: 60;">
                        <p class="text-sm text-gray-500 mt-1">最多20个字符</p>
                    </div>
                    <div>
                        <label class="block text-gray-700 mb-2">URL <span class="text-red-500">*</span></label>
                        <input type="url" name="url" required class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-blue-300 transition-colors" placeholder="https://" style="pointer-events: auto; position: relative; z-index: 60;">
                    </div>
                    <div>
                        <label class="block text-gray-700 mb-2">封面</label>
                        <div class="space-y-4">
                            <!-- 选择类型 -->
                            <div class="flex space-x-4">
                                <label class="inline-flex items-center">
                                    <input type="radio" name="icon-type" value="emoji" class="form-radio" checked 
                                           onclick="console.log('选择表情模式'); showIconOptions('emoji');" style="pointer-events: auto; z-index: 60;">
                                    <span class="ml-2">表情</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" name="icon-type" value="image" class="form-radio"
                                           onclick="console.log('选择图片模式'); showIconOptions('image');" style="pointer-events: auto; z-index: 60;">
                                    <span class="ml-2">图片</span>
                                </label>
                            </div>
                            
                            <!-- Emoji 选择 -->
                            <div id="emoji-picker" class="flex flex-wrap gap-2 max-h-56 overflow-y-auto p-2 border border-gray-200 rounded" style="pointer-events: auto; z-index: 60;">
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">🚀</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">🌟</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">📚</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">💡</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">🎮</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">🎵</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">🎬</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">📝</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">🔍</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">💼</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">📱</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">🖥️</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">🛒</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">📰</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">🍿</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">💻</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">📷</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">🎨</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">📹</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">🎥</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">📺</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">📻</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">🎧</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">🎤</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">🎹</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">🎸</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">🎻</div>
                                <div class="emoji-option cursor-pointer p-2 rounded hover:bg-gray-100 text-2xl">🎲</div>
                            </div>
                            
                            <!-- 图片上传 -->
                            <div id="image-upload" class="hidden" style="pointer-events: auto; z-index: 60;">
                                <input type="file" id="upload-image" accept="image/*" class="hidden">
                                <button type="button" id="upload-button" class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                    <svg class="mr-2 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
                                    </svg>
                                    上传图片
                                </button>
                                <div id="image-preview" class="mt-3 hidden">
                                    <div class="flex items-center justify-center">
                                        <img id="preview-img" class="w-20 h-20 object-cover rounded-md">
                                    </div>
                                    <button type="button" id="change-image" class="mt-2 w-full text-sm text-blue-500 hover:text-blue-700 focus:outline-none">
                                        更换图片
                                    </button>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="selected-cover" name="cover" value="">
                        <input type="hidden" id="custom-image" name="custom-image" value="">
                    </div>
                    <div>
                        <label class="block text-gray-700 mb-2">说明</label>
                        <textarea name="description" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-blue-300 transition-colors" rows="2" maxlength="100" style="pointer-events: auto; position: relative; z-index: 60;"></textarea>
                    </div>
                    <div class="flex justify-end space-x-2 pt-2">
                        <button type="button" id="modal-delete" class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300 transition-colors hidden">删除</button>
                        <button type="button" id="modal-cancel" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400 focus:outline-none transition-colors">取消</button>
                        <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-colors">确认</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 图片裁剪模态框 -->
    <div id="crop-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-4xl max-h-90vh overflow-auto">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium">裁剪图片</h3>
                <button id="crop-close" class="text-gray-400 hover:text-gray-500 focus:outline-none">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <div class="mb-4">
                <div class="cropper-container mb-4">
                    <img id="cropper-image" class="max-w-full">
                </div>
                <div class="flex items-center justify-between">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">预览</label>
                        <div class="preview"></div>
                    </div>
                    <button id="crop-confirm" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-colors">
                        确认裁剪
                    </button>
                </div>
            </div>
        </div>
    </div>
    
  </body>
</html>